<template>
  <view class="store-container">
    <div class="loading-container" v-show="loading">
      <u-loading mode="circle" show />
    </div>
  <template v-if="!loading">
      <!-- 店铺 -->
    <view class="shop-details">
      <image :src="baseInfo.custAvatar"></image>
      <view class="shop-details-info">
        <view class="title-container">
          <view class="title">{{ baseInfo.custName }}</view>
          <view class="shop-details-time">{{
            baseInfo.createTime && baseInfo.createTime.split(" ")[0]
          }}</view>
        </view>
        <view class="describe">{{ baseInfo.storeName }}</view>
      </view>
    </view>
    <!--  -->
    <view
        class="product-wrap"
        v-for="(item, index) in storeExtList"
        :key="item.name"
      >
        <view class="title">
          {{ item.name }}
          <view class="sub" v-if="item.name == '是否做培训'">{{
            item.details[0].isEnable == 1 ? "：是" : "：否"
          }}</view>
        </view>
        <!--  -->
        <u-collapse class="content" :accordion="false">
          <u-collapse-item
            v-for="(items, indexs) in item.details"
            :key="items.id"
            :class="
              items.fatherCode == 'XD_TASK_BRAND'
                ? 'wrap'
                : (items.fatherCode == 'XD_TASK_QUESTION' && !items.remark) ||
                  (items.fatherCode == 'XD_TASK_DOTR' && !items.remark)
                ? 'ddtwrap'
                : ''
            "
          >
            <!-- 小类 头部 -->
            <view class="collapse-title" slot="title">
              <view style="flex: 1">{{ items.dictName || item.name }}</view>
              <u-button
                v-if="items.todoInfo.todoStatus !== '1' && (items.todoInfo.isLeaveOfHandler === 'Y' || !items.todoInfo.handler || items.todoInfo.handler === uid)"
                type="primary"
                plain
                size="mini"
                shape="circle"
                :custom-style="{ padding: '0 30rpx', marginRight: '10rpx' }"
                @click="() => handleEdit(items)"
              >
                去处理
              </u-button>
            </view>
            <template>
              <!-- 小类异常信息显示 -->
              <u-read-more class="read-more-container" show-height="600" :toggle="true" open-text="收起" close-text="展开">
                <!-- 数量 -->
                <view class="item-data--time">
                  <view class="number">
                    <view class="label">预计完成时间:</view>
                    {{ items.todoInfo.planCompletionTime }}
                  </view>
                  <view
                    class="number"
                    v-if="
                      ![
                        'XD_TASK_XIXX_0',
                        'XD_TASK_XIXX_1',
                        'XD_TASK_XIXX_2',
                      ].includes(items.childCode) &&
                      items.fatherCode != 'XD_TASK_BRAND' &&
                      items.quantity &&
                      items.quantity > 0
                    "
                  >
                    <view class="label">数量:</view>
                    {{ items.quantity }}
                  </view>
                </view>
                <!-- 备注 -->
                <view
                  v-if="items.remark && items.remark.length > 1"
                  class="remarksWrap"
                >
                  <view
                    class="remarks remarks-list"
                    v-for="(itemss, indexss) in items.remark"
                    :key="indexss"
                  >
                    <view class="dot">{{ indexss + 1 }}.{{ itemss }}</view>
                  </view>
                </view>
                <view
                  class="remarks"
                  v-if="items.remark && items.remark.length == 1"
                >
                  {{ items.remark && items.remark.toString() }}
                </view>

                <!-- 图片 -->
                <view v-if="items.pics && items.pics.length > 0" class="img-list">
                  <image
                    v-for="(itemt, indext) in items.pics"
                    :key="itemt.url"
                    :src="itemt.url"
                    @tap.stop="imgPreview(items.pics, indext)"
                  ></image>
                </view>

                <!-- 视频 -->
                <view
                  v-if="items.videos && items.videos.length > 0"
                  class="img-list"
                >
                  <view
                    class="video-wrap"
                    v-for="(itemt, indext) in items.videos"
                    :key="indext"
                  >
                    <video
                      :src="itemt.url"
                      objectFit="fill"
                      :initial-time="1"
                      controls
                    ></video>
                    <view
                      class="my-video-bg"
                      @tap.stop="showVideoFn(itemt.url)"
                    ></view>
                  </view>
                </view>

                <!-- 附件 -->
                <view
                  v-if="items.files && items.files.length > 0"
                  class="img-list"
                >
                  <view
                    class="video-wrap"
                    v-for="(itemt, indext) in items.files"
                    :key="indext"
                  >
                    <view class="files-wrap" v-if="itemt.url.includes('.pdf')">
                      <view
                        class="click-wrap"
                        @tap.stop="imgPreFiles(itemt.url)"
                      ></view>
                      <ss-preview :fileUrl="itemt.url" fileType="2"></ss-preview>
                    </view>
                    <image
                      v-else
                      :src="itemt.url"
                      @tap.stop="imgPreFileImgs(index, indexs, itemt.url)"
                    ></image>
                  </view>
                </view>
              </u-read-more>
              <u-divider
                v-if="items.todoInfo.todoStatus === '1'"
                bg-color="#D9D9D9"
              />
              <!-- 已完成信息 -->
              <u-read-more
                v-if="items.todoInfo.todoStatus === '1'"
                class="done-info read-more-container"
                show-height="600"
                style="padding: 30rpx 0"
                :toggle="true" open-text="展开" close-text="收起"
              >
                <view class="item-data--time">
                  <view class="number">
                    <view class="label">完成时间:</view>
                    {{ items.todoInfo.actualCompletionTime }}
                  </view>
                </view>
                <!-- 备注 -->
                <view
                  class="remarks"
                  v-if="items.todoInfo.remark"
                >
                  {{ items.todoInfo.remark }}
                </view>

                <!-- 图片 -->
                <view
                  v-if="items.todoInfo.pics && items.todoInfo.pics.length > 0"
                  class="img-list"
                >
                  <image
                    v-for="(itemt, indext) in items.todoInfo.pics"
                    :key="itemt.url"
                    :src="itemt.url"
                    @tap.stop="imgPreview(items.todoInfo.pics, indext)"
                  ></image>
                </view>

                <!-- 视频 -->
                <view
                  v-if="items.todoInfo.videos && items.todoInfo.videos.length > 0"
                  class="img-list"
                >
                  <view
                    class="video-wrap"
                    v-for="(itemt, indext) in items.todoInfo.videos"
                    :key="indext"
                  >
                    <video
                      :src="itemt.url"
                      objectFit="fill"
                      :initial-time="1"
                      controls
                    ></video>
                    <view
                      class="my-video-bg"
                      @tap.stop="showVideoFn(itemt.url)"
                    ></view>
                  </view>
                </view>

                <!-- 附件 -->
                <view
                  v-if="items.todoInfo.files && items.todoInfo.files.length > 0"
                  class="img-list"
                >
                  <view
                    class="video-wrap"
                    v-for="(itemt, indext) in items.todoInfo.files"
                    :key="indext"
                  >
                    <view class="files-wrap" v-if="itemt.url.includes('.pdf')">
                      <view
                        class="click-wrap"
                        @tap.stop="imgPreFiles(itemt.url)"
                      ></view>
                      <ss-preview :fileUrl="itemt.url" fileType="2"></ss-preview>
                    </view>
                    <image
                      v-else
                      :src="itemt.url"
                      @tap.stop="imgPreFileImgs(index, indexs, itemt.url)"
                    ></image>
                  </view>
                </view>
              </u-read-more>
            </template>
          </u-collapse-item>
        </u-collapse>
      </view>
  </template>

    <!-- 视频放大 -->
    <view
      class="show-video-box"
      v-if="showVideoUrl.length > 0"
      @tap.stop="closeVideoFn()"
    >
      <view class="show-video-box-bd" @tap.stop="closeVideoFn()">
        <video
          id="myVideo"
          :src="showVideoUrl"
          :autoplay="true"
          controls
          :show-fullscreen-btn="true"
          @tap.stop="closeVideoFn()"
        ></video>
        <view class="close-show-video-btn" @tap.stop="closeVideoFn()"
          >返 回</view
        >
      </view>
    </view>
    <!-- 去处理 -->
    <u-modal
      ref="uModal"
      v-model="isModalVisible"
      title="完成情况"
      :width="`${screenWidth}px`"
      show-cancel-button
      z-index="998"
      async-close
			:title-style="{
				borderBottom: 'solid #F5F6F8 2rpx',
				fontSize: '32rpx',
				paddingTop: '28rpx',
				paddingBottom: '28rpx'
			}"
			:confirm-style="{
				borderLeft: 'solid #F5F6F8 2rpx',
			}"
      @confirm="handleSubmit"
    >
      <u-form :model="itemForm" class="edit-form" ref="uForm">
        <u-form-item
          label-width="140rpx"
          label="完成状态"
          prop="status"
          :border-bottom="false"
          required
        >
					<!-- <u-input
						v-model="itemForm.status"
						class="custom-field"
						type="select"
						@click="selectVisible = true"
					/> -->
					<uni-data-select
						v-model="itemForm.status"
						:localdata="statusOpts"
						:clear="false"
						@change="actionSheetCallback"
						class="custom-uni-field"
					></uni-data-select>
        </u-form-item>
        <u-form-item
          label-width="140rpx"
          label="证明图片"
          prop="data"
          :border-bottom="false"
					required
        >
        <view class="upload-img-box">
          <template v-if="itemForm.pics.length > 0">
            <view
              class="view-upload-item"
              v-for="(items, index) in itemForm.pics"
              :key="items.url"
            >
              <image
                :src="items.url"
                @tap.stop="handleFormImagePreview(index)"
              ></image>
              <image
                src="../../static/cancel.png"
                class="cancel-btn"
                @tap.stop="deleteImageByIndex(index)"
              >
              </image>
            </view>
          </template>
          <view
            class="view-upload-btn"
            @tap.stop="handlePickImage"
          ></view>
        </view>
        </u-form-item>
        <u-form-item
          label-width="140rpx"
          label="证明视频"
          prop="data"
          :border-bottom="false"
        >
          <view class="upload-img-box">
            <template v-if="itemForm.videos.length > 0">
              <view
                class="view-upload-item"
                v-for="(video, index) in itemForm.videos"
                :key="video.url"
              >
                <video
                  :src="video.url"
                  objectFit="fill"
                  :initial-time="1"
                  controls
                ></video>
                <view
                  class="my-video-bg"
                  @tap.stop="showVideoFn(video.url)"
                ></view>
                <image
                  src="../../static/cancel.png"
                  class="cancel-btn"
                  @tap.stop="deleteVideoByIndex(index)"
                ></image>
              </view>
            </template>
            <view
              class="view-upload-btn"
              @tap.stop="handlePickVideo"
            ></view>
          </view>
        </u-form-item>
        <u-form-item label-width="140rpx" label="备注" :border-bottom="false">
          <u-input
            v-model="itemForm.remark"
            type="textarea"
            class="custom-field"
          />
        </u-form-item>
      </u-form>
    </u-modal>
    <!-- toast -->
    <u-toast ref="uToast" z-index="99999999" />
  </view>
</template>

<script>
import { getTaskExtTodoDetail, flagTaskExtTodoItem } from "../../common/service.js";
const statusOpts = [{ text: "已完成", value: "已完成" }];
const createDefaultForm = () => ({
  status: '已完成',
  pics: [],
  videos: [],
  remark: ''
})
export default {
  data() {
    const { screenWidth } = uni.getWindowInfo();
    return {
      screenWidth: screenWidth - 36,
      baseInfo: {},
      storeExtList: [],
      taskId: "",
      showVideoUrl: "",
      videoContext: null,
      loading: false,
      isModalVisible: false,
      selectVisible: false,
      itemForm: createDefaultForm(),
      rules: {
        status: [
          {
            required: true,
            message: "请选择状态",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
      currentTodoId: null,
      statusOpts,
    };
  },
  onLoad: function (option) {
    console.log("option", option);
    // 登陆
    this.LOGINACTION();
    this.taskId = option.taskId;
    this.qureryGetTaskExtDetail(option.taskId);
  },
  onShow: function () {},
  watch: {
    isModalVisible(val) {
      if (val) {
        setTimeout(() => this.$refs.uForm.setRules(this.rules), 0);
        this.itemForm = createDefaultForm();
      }
    },
  },
  computed: {
    uid() {
      return this.CONFIG.user.id?.toLowerCase();
    }
  },
  methods: {
    // 附件预览
    imgPreFiles(url) {
      const item = {
        type: "2",
        name: "预览文档",
        src: url,
      };
      uni.navigateTo({
        url:
          "/pages/openPDF/index?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },

    // 附件预览里面的预览图片
    imgPreFileImgs(idx, indx, imgUrl) {
      const that = this;
      console.log("预览图片:", idx, indx, imgUrl);
      const arr = that.storeExtList[idx].details[indx].files;

      const list = [];
      arr.forEach(function (item) {
        !item.url.includes(".pdf") && list.push(item.url);
      });
      console.log("预览结果", list);

      list.map((item, index) => {
        if (item == imgUrl) {
          // 预览图片
          uni.previewImage({
            current: index,
            urls: list,
          });
        }
      });
    },

    // 视频放大播放
    showVideoFn(url) {
      console.log(url);
      const that = this;
      this.showVideoUrl = url;
      setTimeout(function () {
        // 获取 video 上下文 videoContext 对象
        that.videoContext = uni.createVideoContext("myVideo");
        console.log("获取到视频对象:");
        console.log(that.videoContext);
        // 进入全屏状态
        that.videoContext.requestFullScreen();
        // 播放
        that.videoContext.play();
      }, 40);
    },

    // 关闭视频放大
    closeVideoFn() {
      this.videoContext.exitFullScreen();
      this.showVideoUrl = "";
    },

    // 查看大图/预览图片
    imgPreview(arr, indt) {
      const that = this;
      console.log(arr);
      if (arr.length > 0) {
        const list = [];
        arr.forEach(function (item) {
          list.push(item.url);
        });
        // 预览图片
        uni.previewImage({
          current: indt, // uni有一个自带的previewImage方法，是预览图片的效果，但current属性在h5下传入Number不兼容，所以使用数组的方式传入。
          urls: list,
        });
      }
    },
    // 选择图片
    handlePickImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: async (res) => {
          const {  tempFiles:[file] = [] } = res;
          try {
            const fileObj = await this.uploadFileToCloud(file, file.path);
            this.itemForm.pics.push(fileObj)
          } catch (error) {
            
          }
        },
        fail: (res) => {
          console.log(res);
        },
      })
    },
    // 选择视频
    handlePickVideo() {
      uni.chooseVideo({
        sourceType: ["album", "camera"],
        success: async (res) => {
          const {  tempFile = {}, tempFilePath } = res;
          try {
            const fileObj = await this.uploadFileToCloud(tempFile, tempFilePath);
            this.itemForm.videos.push(fileObj)
          } catch (error) {
            
          }
        },
        fail: (res) => {
          console.log(res);
        },
      })
    },
    uploadFileToCloud(file, filePath) {
      if (!file) return Promise.reject('无文件');
      uni.showLoading({
        title: "上传中",
        mask: true,
      });
      return new Promise((resolve, reject) => {
        const params = {
          createBy: this.CONFIG.user.id, // 创建者(华耐工号)
          fileType: file.type, // 文件类型
          isActive: "是", // 是否有效
        };
        const that = this;
        const uploadTask = uni.uploadFile({
          url: this.CONFIG.api + "/common/upload/xdImg",
          file: file,
          filePath,
          name: "file",
          header: {
            Authorization: "Bearer " + (this.CONFIG.token || ""),
            lesseeid: this.CONFIG.lesseeid || "",
          },
          formData: params,
          success(uploadFileRes) {
            let { statusCode, data = '' } = uploadFileRes || {};
            try {
              data = JSON.parse(data);
            } catch (error) {
              data = {}
            }
            const { fileId, code, fileName, url, msg } = data;
            if (statusCode === 200 && fileId && code == 200 ) {
              resolve({fileId, fileName, url})
            } else {
              that.$refs.uToast.show({
                title: msg || "上传失败",
                type: "error", // primary / success / error / warning / info
                duration: 8000,
              });
              reject(msg || '上传失败');
            }
          },
          complete() {
            uni.hideLoading();
          }
        }) 
        uploadTask.onProgressUpdate((res) => {
          // that.currentProgress = res.progress;
          console.log("上传进度" + res.progress);
          console.log("已经上传的数据长度" + res.totalBytesSent);
          console.log(
            "预期需要上传的数据总长度" + res.totalBytesExpectedToSend
          );
        });
      })
    },
    // 上传的图片预览
    handleFormImagePreview(index) {
      const urls = this.itemForm.pics.map(p => p.url);
       // 预览图片
      uni.previewImage({
        current: index, // uni有一个自带的previewImage方法，是预览图片的效果，但current属性在h5下传入Number不兼容，所以使用数组的方式传入。
        urls,
      });
    },
    deleteImageByIndex(index) {
      this.itemForm.pics.splice(index, 1);
    },
    // 视频删除
    deleteVideoByIndex(index) {
      this.itemForm.videos.splice(index, 1);
    },
    handleSubmit() {
      const { pics = [], videos = [], status } = this.itemForm;
			if (!status) {
				this.$refs.uToast.show({
				  title: "请选择状态",
				  type: "error",
				  duration: 3000,
				});
			}
      if (pics.length === 0) {
        this.$refs.uToast.show({
          title: "请上传图片",
          type: "error",
          duration: 3000,
        });
        this.$refs.uModal.clearLoading();
        return Promise.reject("请上传图片");
      }
      const params = {
        taskTodoId: this.currentTodoId,
        ...this.itemForm,
      }
      return new Promise((resolve, reject) => {
        flagTaskExtTodoItem(params, res => {
          this.$refs.uModal.clearLoading();
          const { statusCode, data = {} } = res;
          if (statusCode === 200 && data.code === 200) {
            resolve(data);
            this.isModalVisible = false;
            this.$refs.uToast.show({
              title: '操作成功',
              type: "success", // primary / success / error / warning / info
              duration: 2000,
            });
            this.qureryGetTaskExtDetail(this.taskId);
          } else {
            this.$refs.uToast.show({
              title: data.msg || "操作失败",
              type: "error", // primary / success / error / warning / info
              duration: 8000,
            });
            reject(data.msg)
          }
        }, err => {
          this.$refs.uModal.clearLoading();
          reject(err);
        })
      })
    },
    // 获取详细信息
    qureryGetTaskExtDetail(taskID) {
      const that = this;
      const params = {
        taskId: taskID,
      };
      this.loading = true;
      getTaskExtTodoDetail(
        params,
        function (resuser) {
          that.loading = false;
          if (resuser && resuser.statusCode == 200) {
            const rs = resuser.data;
            if (rs.code == 200) {
              const list = rs.data || [];
              that.baseInfo = list.baseInfo;
              that.storeExtList = list.items.map((item) => {
                const { completionResultList = [], details } = item;
                const completionResultMap = completionResultList.reduce(
                  (acc, l) => {
                    acc[l.id] = l;
                    return acc;
                  },
                  {}
                );
                return {
                  ...item,
                  details: details.map((d) => ({
                    ...d,
                  todoInfo: completionResultMap[d.id] || {},
                  })),
                };
              });
            } else {
              if (rs.msg) {
                that.$refs.uToast.show({
                  title: rs.msg || "获取详情失败",
                  type: "error",
                  duration: 3000,
                  callback: function () {
                    return;
                  },
                });
              }
            }
          } else {
            console.log("模拟数据");
          }
        },
        function (e) {
          that.loading = false;
        }
      );
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      this.itemForm.status = this.statusOpts[index].text;
    },
    handleEdit(item) {
      this.currentTodoId = item.id;
      this.isModalVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f3f5f7;
  height: 100%;
  overflow: scroll;
}

.store-container {
  padding: 20rpx;
  background-color: #f3f5f7;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 1;
  opacity: 0.8;
}

.title-container {
  display: flex;
  align-items: center;
}

.shop-details {
  position: relative;
  display: flex;
  width: 710rpx;
  // height: 180rpx;
  padding: 20rpx 0 20rpx 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
  box-sizing: border-box;

  image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
  }

  &-info {
    flex: 1;
    padding-left: 20rpx;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #000000;
    }

    .describe {
      padding-right: 20rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #666666;
    }
  }

  &-time {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    margin-left: 16rpx;
  }
}

.product-wrap {
  padding: 0 20rpx 20rpx;
  background: #fff;
  margin-top: 20rpx;

  .title {
    display: flex;
    padding: 20rpx 0;
    line-height: 42rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    align-items: center;

    .sub {
      font-size: 28rpx;
      color: #333333;
    }
  }

  .content {
    border-radius: 10rpx;
    margin-top: 20rpx;
    overflow: hidden;

    .u-collapse-item {
      margin-bottom: 10px;
      background: #f7f7f7;
      padding: 0 20rpx;
      border-radius: 10rpx;
    }

    .collapse-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .subtitle {
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      padding: 30rpx 0 10rpx 0;
      color: #666;
      align-items: center;

      .sub {
        color: #333;
      }
    }

    .item-data--time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // padding: 10rpx 0 0 0;
    }

    .number {
      display: flex;
      // padding: 15rpx 0 10rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333;

      .label {
        color: #999999;
        padding-right: 10rpx;
      }
    }

    .remarks {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
      padding: 20rpx 0;
    }

    .remarksWrap {
      background: #f7f7f7;
      padding: 20rpx;

      .remarks {
        padding: 0;
      }
    }

    .img-list {
      display: flex;
      width: 640rpx;
      flex-wrap: wrap;
      margin-top: 20rpx;

      image {
        width: 150rpx;
        height: 150rpx;
        margin: 0 10rpx 20rpx 0;
        border-radius: 10rpx;
      }
    }
  }

  .video-wrap {
    position: relative;
    width: 150rpx;
    height: 150rpx;
    margin: 0 10rpx 20rpx 0;
    border-radius: 10rpx;

    image,
    video {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }

    .files-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      overflow: hidden;

      .click-wrap {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 111;
      }
    }
  }

  .my-video-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
  }

  .wrap {
    background: transparent;
    margin-top: 0;
    padding: 0;

    .subtitle {
      height: 75rpx;
      line-height: 75rpx;
      color: #333;
    }

    .remarks {
      padding: 20rpx;
      background: #f7f7f7;
      word-break: break-all;
    }

    .remarks-list {
      padding: 0;
    }
  }

  .ddtwrap {
    margin: 0;
    padding: 0;
    margin-top: -22rpx;
  }

  .information {
    padding: 20rpx;
    background: #f7f7f7;
    border-radius: 10rpx;
    margin-top: 20rpx;
    font-family: PingFangSC, PingFang SC;

    .subtitle {
      font-weight: 600;
      font-size: 28rpx;
      color: #333333;
    }

    .tips {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      padding: 5rpx 0;
    }
  }

  .attachment {
    display: flex;
  }
}

.show-video-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 500;
}

.show-video-box-bd {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* .show-video-box-bd video {
		width: 100%;
		height: 100%;
	} */

.close-show-video-btn {
  width: 88rpx;
  height: 88rpx;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99999999999999;
  background: url("")
    no-repeat center;
  background-size: 48rpx;
}
.edit-form {
  padding: 40rpx 30rpx;
}
.custom-field {
  background: #f7f7f7;
  padding-left: 20rpx !important;
  padding-right: 20rpx !important;
}
.custom-uni-field {
	/deep/ .uni-select {
		border: none;
		background: #f7f7f7;
		height: 76rpx;
	}
	/deep/ .uni-select__input-placeholder {
		font-size: 14px;
		color: #C1C4CB;
	}
}
.view-upload-btn {
  width: 150rpx;
  height: 150rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  position: relative;
  margin-right: 15rpx;
  margin-top: 20rpx;
}

.view-upload-btn::before {
  content: " ";
  display: block;
  width: 60rpx;
  height: 3rpx;
  background: #d8d8d8;
  border-radius: 3rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1.5rpx;
  margin-left: -30rpx;
}

.view-upload-btn::after {
  content: " ";
  display: block;
  width: 3rpx;
  height: 60rpx;
  background: #d8d8d8;
  border-radius: 3rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30rpx;
  margin-left: -1.5rpx;
}
.u-drawer {
  z-index: 998 !important;
}
.upload-img-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

  .files-wrap {
    position: relative;
    width: 173rpx;
    height: 173rpx;
    overflow: hidden;

    .click-wrap {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 111;
    }
  }
}
.view-upload-item .cancel-btn {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  z-index: 1;
}

.view-upload-item image,
.view-upload-item video {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}
.view-upload-item {
  position: relative;
  width: 140rpx;
  height: 140rpx;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
  margin-right: 15rpx;
  margin-top: 20rpx;
}
.read-more-container {
  /deep/ .u-content {
    text-indent: initial;
  }
}
</style>
